<template>
 <view :style="{ background: `#f7f8fc url(${imageBaseUrl}/detailsbj.png) no-repeat top center / 100% 447rpx` }">
    <view class="GuideDetailsTop">
      <view class="GuideDetailsTops">
        <view class="PolicyDocumentLiTitle">{{ policyInfo.policyName }}</view>
        <view class="PolicyDocumentLiTag">
          <view class="PolicyDocumentLiTagli">{{ policyInfo.policyRegion }}</view>
          <view class="PolicyDocumentLiTagli">{{policyInfo.policyPubdept}}</view>
          <view class="PolicyDocumentLiTagli">{{ getDictLabel(policyInfo.policyType,dictList) }}</view>
          <view class="PolicyDocumentLiTagli">{{ policyInfo.pubTime }}</view>
        </view>
        <!-- <view class="PolicyDocumentLiType green">申报中 | 30天内截止</view> -->
      </view>
    </view>
    <view class="GuideDetailsBot">
      <view class="GuideDetailsBotTabs">
        <view 
          :class="['GuideDetailsBotTabsLi', activeIndex === index ? 'on' : '']" 
          v-for="(item, index) in ['指南详情', '政策原文']" 
          :key="index"
          @click="activeIndex = index"
        >{{ item }}</view>
      </view>
      <view class="GuideDetailsBotEnd">
        <gDetails v-if="activeIndex === 0" :policyInfo="policyInfo" />
        <original v-if="activeIndex === 1" :policyInfo="policyInfo" />
      </view>
    </view>
    <rightFixedReport />
    <rightShare 
    :isFavourite="isFavourite"
    @clickFavouriteEvent="clickFavouriteEvent" 
    @clickUnFavouriteEvent="clickUnFavouriteEvent"/>
  </view>
</template>

<script>
import gDetails from './components/gDetails.vue';
import original from './components/original.vue';
import {
		guideDetail,
		favoritePolicy,
		isFavoritePolicy,
		deletePolicyCollect
	} from '../../api/api.js';
import rightFixedReport from '@/pages/components/rightFixedReport.vue'
import rightShare from "@/pages/components/rightShare.vue";
import { useStore } from 'vuex';
import { DICT_TYPES } from '@/store/modules/dict';
import { getDictLabel } from '@/utils/dict';
export default {
  components: { gDetails, original, rightFixedReport, rightShare },
  data() {
    return {
      activeIndex: 0,
      policyInfo: {},
      dictList: [],
      isFavourite: false,
      userPolicyFavorite: {},
    };
  },
  computed: {
			imageBaseUrl() {
				return this.$IMAGE_BASE_URL;
			}
		},
  onLoad(options) {
    if (options.id) {
      this.getDetail(options.id);
    }
    this.getDictData();
  },
  methods: {

		getDictLabel,
    // 获取是否收藏
    async getFavourite() {
      try {
        if (this.policyInfo && this.policyInfo.id) {
          const res = await isFavoritePolicy(this.policyInfo.id);
          if (res.code === 0) {
            console.log("收藏状态", res.data);
            if(res.data){
              this.isFavourite = true;
              this.userPolicyFavorite = res.data;
            }else{
              this.isFavourite = false;
            }
          }
        }
      } catch (error) {
        console.error('获取收藏状态失败:', error);
      }
    },

			async clickUnFavouriteEvent() {
				console.log("点击取消收藏");
				// 调用取消收藏接口
				const res = await deletePolicyCollect(this.userPolicyFavorite.id);
				if (res.code === 0) {
					uni.showToast({
						title: "取消收藏成功",
					});
					this.getFavourite();
				}
			},


			clickFavouriteEvent() {
				console.log("点击分享", this.policyInfo);
				// 调用收藏接口

				const data = {
					policyId: this.policyInfo.id,
					favoriteType: this.policyInfo.isDeclare,
				};
				favoritePolicy(data).then((res) => {
					if (res.code === 0) {
						uni.showToast({
							title: "收藏成功",
							icon: "success",
						});
						this.getFavourite();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					}
				});
			},

    async getDictData() {
      const store = useStore();
      // 从Vuex中获取政策类型字典
      this.dictList = await store.dispatch('dict/loadDict', DICT_TYPES.POLICY_TYPE);
    },
    async getDetail(id) {
      try {
        const res = await guideDetail(id);
        console.log("指南详情数据:", res);
        if (res.code === 0) {
          this.policyInfo = res.data;
          // 获取到政策信息后，再获取收藏状态
          this.getFavourite();
        }
      } catch (error) {
        console.error('获取指南详情失败:', error);
      }
    },
  }
}
</script>

<style lang="scss">
	.GuideDetailsTop {
		padding: 30rpx 24rpx;

		.GuideDetailsTops {
			padding: 28rpx 33rpx;
			border-radius: 20rpx;
			margin: 0 0 27rpx;
			background: #ffffff;

			.PolicyDocumentLiTitle {
				font-size: 32rpx;
				color: #202020;
			}

			.PolicyDocumentLiTag {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 15rpx 0;
				gap: 15rpx;

				.PolicyDocumentLiTagli {
					padding: 13rpx;
					// height: 40rpx;
					line-height: 30rpx;
					font-size: 24rpx;
					color: #4e5262;
					background: #ecf3fc;
					margin-right: 0;
				}
			}

			.PolicyDocumentLiType {
				width: 248rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				font-size: 24rpx;
				color: #ffffff;
				background: url("/static/images/collbj.png") no-repeat center / 248rpx 40rpx;

				&.green {
					width: 248rpx;
					height: 40rpx;
					background: url("/static/images/collbj.png") no-repeat center / 248rpx 40rpx;
				}

				&.blue {
					width: 271rpx;
					height: 40rpx;
					background: url("/static/images/daishenbaobj.png") no-repeat center / 271rpx 40rpx;
				}

				&.gray {
					width: 103rpx;
					height: 40rpx;
					color: #4e5262;
					background: url("/static/images/jieshubj.png") no-repeat center / 103rpx 40rpx;
				}
			}
		}
	}

	.GuideDetailsBot {
		.GuideDetailsBotTabs {
			display: flex;
			justify-content: space-between;
			background: url("/static/images/guidebuj1.png") no-repeat bottom center / 100% 94rpx;

			.GuideDetailsBotTabsLi {
				width: 411rpx;
				height: 110rpx;
				font-size: 32rpx;
				color: #5e646b;
				line-height: 110rpx;
				text-align: center;

				&:nth-child(1) {
					&.on {
						background: url("/static/images/guidebuj2.png") no-repeat bottom center / 411rpx 110rpx;
					}
				}

				&:nth-child(2) {
					&.on {
						background: url("/static/images/guidebuj3.png") no-repeat bottom center / 411rpx 110rpx;
					}
				}
			}
		}

		.GuideDetailsBotEnd {
			padding: 0 24rpx;
		}
	}
</style>